<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import axios from "axios";

window._AMapSecurityConfig = {
  securityJsCode: 'e433a7157bce3f89541c82947a017e81'
}
const requests = axios.create({
  //配置对象
  //基础路径，requests发出的请求在端口号后面会跟改baseURl
  baseURL: `${window.location.origin}`,
  //代表请求超时的时间5s
  timeout: 5000,
})
export default {
  data() {
    return {
      map: null,
      Dimension: 1,
      Longitude: 1
    };
  },
  props: ['activeBox'],
  methods: {
    initMap() {
      AMapLoader.load({
        key: '59ebc86d7a78e0e1579701d5981c8874',
        version: '2.0',
        plugins: ['']
      }).then(AMap => {
        this.map = new AMap.Map('container', {
          zoom: 10,
          center:[87.68,43.77],
          viewMode: "2D", //设置地图模式
          position: [this.Dimension, this.Longitude]
        });

        // 创建 AMap.Icon 实例
        const icon = new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
          imageOffset: new AMap.Pixel(-9, -3),
          imageSize: new AMap.Size(135, 40)
        });

        // 创建 AMap.Marker 实例
        const marker = new AMap.Marker({
          position: new AMap.LngLat(87.68,43.77),
          offset: new AMap.Pixel(-13, -30),
          icon: icon,
          zooms: [2, 12]
        });

        // 将 Marker 添加到地图上
        this.map.add(marker);

      }).catch(e => {
        console.log(e);
      });
    },
    fetchData() {
      return new Promise((resolve, reject) => {
        requests("/api/datatest2").then((res) => {
          this.Dimension = res.data.location.Dimension;
          this.Longitude = res.data.location.Longitude;
          resolve();
        }).catch(error => {
          reject(error);
        });
      });
    }
  },

  async mounted() {
    try {
      await this.fetchData();
      this.initMap();
    } catch (error) {
      console.error('Error initializing map:', error);
    }
  }
}
</script>

<style lang="less">
#container {
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>

